<template>
    <NavBar title="个人信息" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field name="uploader" label="更新头像">
                <template #input>
                    <van-uploader :max-count="1" v-model="avatar" />
                </template>
            </van-field>
            <van-field name="role_id" label="账号类型" :rules="[{ required: true, message: '请选择账号类型' }]">
                <template #input>
                    <van-radio-group v-model="role_id" direction="horizontal">
                        <van-radio :name="1">医师</van-radio>
                        <van-radio :name="2">患者</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-model="phone" name="phone" label="手机号码" placeholder="手机号码"
                :rules="[{ required: true, message: '请填写手机号码' }]" />
            <van-field v-model="name" name="name" label="姓名" placeholder="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]" />
            <van-field v-model="school" name="school" label="毕业院校" placeholder="毕业院校"
                :rules="[{ required: true, message: '请填写毕业院校' }]" />
            <!-- ############# -->
            <van-field v-if="role_id===1" v-model="bus_title" is-link readonly label="机构名称" placeholder="点击选择机构"
                @click="showPicker2 = true" :rules="[{ required: true, message: '请选择机构' }]" />
            <van-field v-if="role_id===1" style="display: none;" v-model="bus_id" readonly name="bus_id" />
            <van-popup v-model:show="showPicker2" position="bottom">
                <van-picker :columns="columns2" @confirm="onConfirm2" @cancel="showPicker2 = false" />
            </van-popup>
            <!-- ############# -->
            <van-field name="gender" label="性别" :rules="[{ required: true, message: '请选择性别' }]">
                <template #input>
                    <van-radio-group v-model="gender" direction="horizontal">
                        <van-radio :name="1">男</van-radio>
                        <van-radio :name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- ############# -->
            <van-field v-if="role_id===1" v-model="title" is-link readonly name="title" label="职称" placeholder="点击选择职称"
                @click="showPicker = true" :rules="[{ required: true, message: '请选择职称' }]" />
            <van-popup v-model:show="showPicker" position="bottom">
                <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <!-- ############# -->

        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>

</template>

<script setup>
import { useRouter } from 'vue-router';
import { doctorUpdate, getDoctorDetail } from '@/utils/api';
import { showToast } from 'vant';
import { getCurrentInstance, ref } from 'vue';

const { replace } = useRouter();

const userLoginInfo = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
const { baseUrl } = getCurrentInstance().appContext.config.globalProperties;

const role_id = ref(userLoginInfo.role_id);
const name = ref(userLoginInfo.name);
const phone = ref(userLoginInfo.phone);
const bus_id = ref(userLoginInfo.bus_id);
const bus_title = ref(userLoginInfo.bus_title);
const school = ref(userLoginInfo.school);
const gender = ref(userLoginInfo.gender);
const title = ref(userLoginInfo.title);

const avatar = ref([
    { url: userLoginInfo.avatar ? baseUrl + userLoginInfo.avatar : baseUrl + '/uploads/avatar.png' },
]);
const onSubmit = async (values) => {
    if (values.uploader[0] && values.uploader[0].file) {
        values.avatar = values.uploader[0].file;
    }
    delete values.uploader;
    const fd = new FormData();
    fd.append('id', userLoginInfo.id);
    for (let key in values) {
        fd.append(key, values[key])
    }
    const { data } = await doctorUpdate(fd);
    showToast(data.msg);
    if (data.code === 200) {
        // 更新本地存储中的个人信息
        const ret = await getDoctorDetail(userLoginInfo.id);
        const loginInfo = {
            ...ret.data.data,
            token: userLoginInfo.token
        }
        localStorage.setItem('userLoginInfo', JSON.stringify(loginInfo));
        replace('/my');
    }

};
const showPicker = ref(false);
const columns = [
    { text: '主任医师', value: '主任医师' },
    { text: '副主任医师', value: '副主任医师' },
    { text: '执业医师', value: '执业医师' },
    { text: '助理医师', value: '助理医师' },
];

const onConfirm = ({ selectedOptions }) => {
    title.value = selectedOptions[0]?.text;
    showPicker.value = false;
};

const showPicker2 = ref(false);
const columns2 = [
    { text: '兔博士口腔诊所', value: 1 },
    { text: '蓝天口腔', value: 2 },
    { text: '拜博口腔', value: 3 },
    { text: '小白兔口腔', value: 4 },
];

const onConfirm2 = ({ selectedOptions }) => {
    bus_title.value = selectedOptions[0]?.text;
    bus_id.value = selectedOptions[0]?.value;
    showPicker2.value = false;
};

</script>

<style></style>